<template>
    <div id="echart">
      <!-- <div  > -->
         <vue-draggable-resizable
          @dragging="onDrag"
          @resizing="onResize"
          @activated="onActivated(item)"
          @deactivated="onDeactivated(item)"
          :x='item.settings.position.x'
          :y='item.settings.position.y'
          :w='item.settings.size.width'
          :h='item.settings.size.height'
          :lock-aspect-ratio="item.lockSize"
          class-name-active="activeClass"
          :scale="0.7"
        >
          <v-chart :options="item.settings.options" :autoresize="true"/> 
          <p>X: {{ item.settings.position.x }} / Y: {{ item.settings.position.y }} - Width: {{ item.settings.size.width }} / Height: {{ item.settings.size.height }}</p>
          </vue-draggable-resizable>
      <!-- </div> -->
    </div>
</template>

<style scoped>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
 .echarts {
        width: 100%;
        height: 100%;
 }
.echartParent {
  width: 100%;
  height: 100%;
}
#echart {
  width: 100%;
  height: 100%;
}
.activeClass{
  z-index:999!important;
}
</style>

<script>
import ECharts from "vue-echarts";
import Vue from 'vue'
import store from "@/vuex/store.js"
export default {
  components: {
    "v-chart": ECharts
  },
  data() {
    return {
      item:{
          lockSize:false,
          type:'echart',
          settings:{
              position:{x:807.5,y:387.5},
              size:{width:305,height:305},
              options: {
                // backgroundColor: "rgba(256, 256, 256, 1)",
                title:{
                text:'ECharts 数据统计'
                },
                tooltip:{},
                legend:{
                    data:['用户来源']
                },
                //     grid: {
                //   left: "0%",
                //   right: "0%",
                //   top: "0%",
                //   bottom: "0%",
                //   containLabel: true
                // },
                xAxis:{
                      axisLabel: {
                      interval: 0,
                      rotate: 0,
                      textStyle: {
                        fontSize: 12,
                        color: "#33333"
                      }
                    },
                    data:["Android","IOS","PC","Other"]
                },
                yAxis:{

                },
                series:[{
                    name:'访问量',
                    type:'line',
                    data:[500,200,360,100]
                }]
              }
          }
        },
    };
  },
  mounted(){
         /* 鼠标右击 */
    //  document.getElementsByClassName('echarts').onmouseup = function(e){     //在body里点击触发事件
    //     if(e.button===2){       //如果button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）
    //         e.preventDefault();
    //         console.log(e);     //将传进去的参数打印出来
    //         console.log(e.offsetY);     //打印出鼠标点击的Y轴坐标
    //         console.log(e.offsetX);     //打印出鼠标点击的X轴坐标
    //         document.getElementById('mouseBox').style.top = e.offsetY+'px';     //鼠标点击时给div定位Y轴
    //         document.getElementById('mouseBox').style.left = e.offsetX+'px';    //鼠标点击时给div定位X轴
    //         document.getElementById('mouseBox').style.display = 'block';        //显示div盒子
    //     }else{
    //         document.getElementById('mouseBox').style.display = 'none';         //否则不显示div盒子
    //     }
    //  }

    document.getElementById("echartPanel").onclick = ((e)=>{
        var target=$(e.target);
        console.log(target)
       if(target.is(`#${this.item.type}`)){
         store.state.active = false;
       }else{
         store.state.active = true;
       }
    })
  
  },
  methods:{
      onResize: function (x, y, width, height) {
        this.item.settings.position.x = x
        this.item.settings.position.y = y
        this.item.settings.size.width = width
        this.item.settings.size.height = height

        /* 缩放右击盒子跟随 */
        document.getElementById('mouseBox').style.top = (this.item.settings.position.y+this.item.settings.size.height/2)+'px';     
        document.getElementById('mouseBox').style.left = (this.item.settings.position.x+this.item.settings.size.width/2)+'px';   
      },
      // onResizeStop: function (x, y, width, height) {
      //   store.state.items[this.currentItem.index].settings.position.x=x
      //   store.state.items[this.currentItem.index].settings.position.y=y
      //   store.state.items[this.currentItem.index].settings.size.width=width
      //   store.state.items[this.currentItem.index].settings.size.height=height
      // },
      onDrag: function (x, y) {
        this.item.settings.position.x = x
        this.item.settings.position.y = y

        /* 拖动右击盒子跟随 */
        document.getElementById('mouseBox').style.top = (this.item.settings.position.y+this.item.settings.size.height/2)+'px';     
        document.getElementById('mouseBox').style.left = (this.item.settings.position.x+this.item.settings.size.width/2)+'px';   
      },
      // onDragStop: function (x, y) {
        // store.state.items[this.currentItem.index].settings.position.x=x
        // store.state.items[this.currentItem.index].settings.position.y=y
      // },
      onActivated(item){
        store.state.active = true;
        this.$parent.getCurrentItem(item);
        $(".echarts").on( "contextmenu", ()=>{
              document.getElementById('mouseBox').style.top = (this.item.settings.position.y+this.item.settings.size.height/2)+'px';    
              document.getElementById('mouseBox').style.left = (this.item.settings.position.x+this.item.settings.size.width/2)+'px';    
              document.getElementById('mouseBox').style.display = 'block';        //显示div盒子
        });
      },
      onDeactivated () {
        // store.state.active = false;
        // var item = {};
        // this.$parent.getCurrentItem(item);
        //  $(".echarts").off( "contextmenu", ()=>{
              // document.getElementById('mouseBox').style.display = 'none';        //隐藏div盒子
        //   });
        
      },
      destroy(){
        this.$destroy();
        $('#echart').remove()
      }
  }
};
</script>